<template>
  <div
    class="slides-pagination"
    :class="[{ 'slides-pagination__dark': dark }]"
  >
    <div class="slides-pagination__list">
      <button
        v-show="!hideArrow"
        type="button"
        class="slides-pagination__arrow__prev"
        :class="{
          'slides-pagination__arrow--disable':
              currentIndex === 0 && !isLoop,
        }"
        @click="updatePage(currentIndex - 1, 'slidePrev')"
      ></button>
        <transition-group name="list" tag="div">
          <template v-for="(dot, idx) in count">
            <button
              v-if="idx >= showBtnMin && idx < showBtnMax"
              :key="dot"
              type="button"
              class="slides-pagination__dot"
              :class="{
                'slides-pagination__dot--is-active':
                    idx === currentIndex,
              }"
              @click="updatePage(idx)"
            ></button>
          </template>
        </transition-group>
        <button
          v-show="!hideArrow"
          type="button"
          class="slides-pagination__arrow__next"
          :class="{
            'slides-pagination__arrow--disable':
              currentIndex === count - 1 && !isLoop,
          }"
          @click="updatePage(currentIndex + 1, 'slideNext')"
        ></button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  currentIndex: {
    type: Number,
    default: () => 0,
  },
  count: {
    type: Number,
    default: () => 0,
  },
  dark: {
    type: Boolean,
    default: () => false,
  },
  hideArrow: {
    type: Boolean,
    default: () => false,
  },
  isLoop: {
    type: Boolean,
    default: () => false,
  },
})

const emit = defineEmits(["updatePage", "slidePrev", "slideNext"]);

const showBtnMax = computed(() => {
  if (props.count < 6 || props.currentIndex < 3) return 5;
  return props.currentIndex + 3;
})

const showBtnMin = computed(() => {
  if (showBtnMax.value > props.count) return props.count - 5;
  return showBtnMax.value - 5;
})

const updatePage = (idx: number, dir?: string) => {
  if (props.isLoop) {
    if (dir == "slidePrev") return emit("slidePrev", idx);
    if (dir == "slideNext") return emit("slideNext", idx);
  } else {
    if (idx < 0 || idx >= props.count) return;
  }
  emit("updatePage", idx);
}
</script>

<style lang="scss" scoped>
.slides-pagination {
  --dot-color: #fff
}

.slides-pagination__dark {
  --dot-color: #0032a0
}

.slides-pagination__dark .slides-pagination__arrow__next,.slides-pagination__dark .slides-pagination__arrow__prev {
  background-image: url();
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: hsla(0,0%,100%,0)
}

.slides-pagination__list {
  display: flex;
  align-items: center;
  justify-content: center
}

.slides-pagination__arrow__next,.slides-pagination__arrow__prev {
  background: none;
  border: none;
  width: 24px;
  height: 24px;
  background-image: url();
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: hsla(0,0%,100%,0)
}

.slides-pagination__arrow__next:hover,.slides-pagination__arrow__prev:hover {
  opacity: .7
}

.slides-pagination__arrow__next:active,.slides-pagination__arrow__prev:active {
  opacity: 1
}

.slides-pagination__arrow__prev {
  transform: scale(-1)
}

// .slides-pagination__arrow--disable,.slides-pagination__arrow--disable:active,.slides-pagination__arrow--disable:hover {
//   opacity: .4
// }

.slides-pagination .list-leave-active {
  position: absolute
}

.slides-pagination .list-enter,.slides-pagination .list-leave-to {
  opacity: 0;
  transform: scale(0)
}

.slides-pagination__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--dot-color);
  opacity: .4;
  padding: 0;
  margin: 0 6px;
  border: none;
  transition: all .3s ease-in-out
}

@media(max-width: 767.98px) {
  .slides-pagination__dot {
      width:6px;
      height: 6px;
      margin: 0 4px
  }
}

.slides-pagination__dot:hover {
  opacity: .7
}

.slides-pagination__dot:active {
  opacity: 1
}

.slides-pagination__dot--is-active {
  width: 10px;
  height: 10px;
  opacity: 1
}

@media(max-width: 767.98px) {
  .slides-pagination__dot--is-active {
      width:8px;
      height: 8px
  }
}

.slides-pagination__dot--is-active:active,.slides-pagination__dot--is-active:hover {
  opacity: 1
}
</style>